<template>
  <div class="user-panel">
    <div class="user-logo">
      <img
        class="logo"
        v-logo-error
        :src="profile?.headimgurl"
        alt=""
        v-if="profile?.headimgurl"
      />
      <img
        class="logo"
        src="~/assets/images/user-logo/default_logo.jpg"
        alt=""
        v-else
      />
      <div class="user-name_mobile">
        <div class="label" v-if="lang == 'cn'">姓名</div>
        <div class="label" v-if="lang == 'en'">username</div>
        <div class="value">
          {{ profile?.last_name +' '+ profile?.first_name }}
        </div>
      </div>
    </div>
    <div class="details">
      <div class="name">
        <div class="label" v-if="lang == 'cn'">姓名</div>
        <div class="label" v-if="lang == 'en'">username</div>
        <div class="value">
          {{ profile?.last_name +' '+ profile?.first_name }}
        </div>
      </div>
      <div class="salary">
        <div class="label" v-if="lang == 'cn'">期望薪资</div>
        <div class="label" v-if="lang == 'en'">Expected Salary</div>
        <div class="value" v-if="lang == 'cn'">
          {{ profile?.cn_salary_expectation }}
        </div>
        <div class="value" v-if="lang == 'en'">
          {{ profile?.en_salary_expectation }}
        </div>
      </div>
      <div class="position">
        <div class="label" v-if="lang == 'cn'">职能职位</div>
        <div class="label" v-if="lang == 'en'">Functional Position</div>
        <div class="value" v-if="lang == 'cn'">
          {{ profile?.cn_position_name }}
        </div>
        <div class="value" v-if="lang == 'en'">
          {{ profile?.en_position_name }}
        </div>
      </div>
      <div class="tags">
        <div class="label" v-if="lang == 'cn'">个人标签</div>
        <div class="label" v-if="lang == 'en'">Personal Tags</div>
        <div class="tags-list">
          <div v-if="profile?.language && profile?.language.length">
            <div v-for="(item, index) in tagData.language" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== tagData.language.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.education && profile?.education.length">
            <div v-for="(item, index) in tagData.education" :key="item">
              <span>{{ item }}</span
              ><span v-if="index !== tagData.education.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.certificate && profile?.certificate.length">
            <div v-for="(item, index) in tagData.certificate" :key="item">
              <span>{{ item }}</span
              ><span v-if="index !== tagData.certificate.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.air_model && profile?.air_model.length">
            <div v-for="(item, index) in profile.air_model" :key="item">
              <span>{{ item }}</span
              ><span v-if="index !== profile.air_model.length - 1">/</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, inject, ref, watch } from "vue";
import { postAriModelAll, postLanguageList } from "../../../../../api/api";
import {
  postMemberIntention,
  postProfileCertificate,
  postProfileEducation,
} from "../../../../../api/profile";
import { useGlobalStore, useMemberStore } from "../../../../../store";
const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

let lang = inject("lang");

const { profile } = useMemberStore();
const globalStore = useGlobalStore();
const tagData = ref({
  language: [],
  education: [],
  certificate: [],
});
// 获取标签中英数据
const getTagData = async () => {
  tagData.value.language = getData("languageList") as never[];
  tagData.value.education = getData("educationList") as never[];
  tagData.value.certificate = getData("certificateList") as never[];
};
watch(lang, () => {
  getTagData();
});
const getData = (key: string) => {
  let arr: any[] = [];
  globalStore[key] &&
    globalStore[key].map((item) => {
      if (lang.value == "cn") {
        arr.push(item.cn_title);
      }
      if (lang.value == "en") {
        arr.push(item.en_title);
      }
    });
  return arr;
};

getTagData();
</script>
<style scoped lang="less">
.user-panel {
  display: flex;
  gap: 24px;
  .user-logo {
    flex-shrink: 0;
    .user-name_mobile {
      display: none;
    }
  }
  .details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    color: #36434d;
    & > div {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .salary {
      font-size: 14px;
      color: #36434d;
    }
    .name {
      .value {
        font-size: 16px;
        color: #172026;
      }
    }
    .tags-list {
      display: flex;
      gap: 8px;
      font-size: 12px;
      flex-wrap: wrap;

      & > div {
        flex-wrap: wrap;
        padding: 4px 8px;
        border-radius: 6px;
        background: #f5f8fa;
        white-space: nowrap;
        display: flex;
      }
    }
    .label {
      width: 100px;
    }
    .seek {
      .status {
        padding: 4px 8px;
        background: rgba(54, 217, 108, 0.1);
        border-radius: 6px 6px 6px 6px;
        font-size: 12px;
        color: #36d96c;
        &.offline {
          background: #eef3f4;
          color: #70818c;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .user-panel {
    flex-direction: column;
    gap: 82px;
    .user-logo {
      display: flex;
      gap: 82px;
      img.logo {
        width: 246px;
        height: 246px;
      }
      .user-name_mobile {
        display: flex;
        flex-direction: column;
        gap: 20px;
        .label {
          display: none;
        }
        .value {
          font-size: 82px;
          color: #172026;
        }
      }
    }
    .details {
      font-size: 72px;
      gap: 61px;
      & > div {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
      }
      .salary {
        font-size: 72px;
      }
      .label {
        white-space: nowrap;
      }
      .name {
        display: none;
      }
      .tags-list {
        gap: 41px;
        flex-wrap: wrap;
        font-size: 61px;
        & > div {
          white-space: nowrap;
          flex-wrap: wrap;
          padding: 20px 41px;
          border-radius: 31px;
        }
      }
      .seek {
        .status {
          padding: 20px 41px;
          border-radius: 31px;
          font-size: 61px;
        }
      }
    }
  }
}
</style>
